<template>
    <div :class="{
        'box': true,
        'isRight': isRight
    }">
        <!-- <div :class="{
            'avatar-box': true,
            'isNow': isNow,
        }">
            <span class="is-z" v-show="isZ"></span>
            <Avatar :username="username" :avatar="avatar"/>
        </div> -->
        <Avatar :username="username" :avatar="avatar"/>
        <div class="poke-card-box" :style="{
            'justify-content': isRight ? 'flex-end' : ''
        }" ref="pokeCardBoxRef">
            <div class="poke-card-item">
                <Card v-for="(item, index) in cardList" :key="index" :code="'4'||item.code" :icon="'icon-heitao'||item.icon"
                    :showCard="showCard" :isRight="isRight" />
            </div>
            <div class="open-card" v-show="!showCard" @click="showCard=!showCard">开牌</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Card from './Card.vue'
import Avatar from './Avatar.vue';
const props = defineProps(['username', 'totalNumber', 'avatar', 'isNow', 'isZ', 'isRight', ])
const emit = defineEmits([])
const pokeCardBoxRef = ref(null);
const cardList = ref([]);
const showCard = ref(false);
defineExpose({
    getPos: () => {
        return pokeCardBoxRef.value.getBoundingClientRect();
    },
    addCard: () => {
        if (cardList.value.length === 3) return
        cardList.value.push({
            code: '',
            icon: ''
        })
    },
    removeCard: () => {
        cardList.value = [];
    },
    setCard: (list) => {
        cardList.value = list;
    }
})
</script>

<style scoped lang="less">
.box {
    color: #fff;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
    width:100%;

    &.isRight {
        flex-direction: row-reverse;
    }

    // .avatar-box {
    //     // width: 80px;
    //     // border: 2px solid #5c3e07d0;
    //     // border-radius: 2px;
    //     display: flex;
    //     align-items: center;
    //     position: relative;

    //     &.isNow {
    //         @keyframes color-animate {
    //             from {
    //                 border-color: aquamarine;
    //             }

    //             to {
    //                 border-color: #5c3e07d0;
    //             }
    //         }

    //         animation: color-animate 3s infinite ease-in-out;
    //     }

    //     .avatar {
    //         width: 100%;
    //     }

    //     .is-z {
    //         position: absolute;
    //         right: -50%;
    //         top: 0;
    //         transform: translate(-50%, -50%);
    //         background-color: rgb(207, 70, 35);
    //         color: #d49711;
    //         border: 2px solid #d49711;
    //         border-radius: 50%;
    //         width: 40%;
    //         height: 40%;

    //         &::before {
    //             content: '庄';
    //             position: absolute;
    //             left: 50%;
    //             top: 50%;
    //             transform: translate(-50%, -50%);
    //             font-size: 50%;
    //         }
    //     }
    // }

    // .user-info {
    //     flex: 1;
    //     background: rgba(0, 0, 0, 0.4);
    //     font-size: .12rem;
    //     display: flex;
    //     flex-direction: column;
    //     gap: .04rem;

    //     .username {
    //         text-align: center;
    //     }
    // }

    .poke-card-box {
        position: relative;
        height: 80px;
        width: 120px;
        display: flex;

        .poke-card-item {
            position: relative;
            width: 60px;
            height: 100%;
            object-fit: contain;
        }

        &:hover {
            .open-card {
                display: flex;
            }
        }

        .open-card {
            display: none;
            position: absolute;
            width: 120px;
            font-size: 50%;
            z-index: 10;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.4);
        }
    }
}
</style>